<template>
  <div>
    <a-tabs v-model:active-key="curtab" size="mini">
      <a-tab-pane v-for="tab in tabCardList" :key="tab.key" :title="tab.name" />
    </a-tabs>
    <!-- 发票 -->
    <AdInvoiceReportList :searchVal="searchVal" v-if="curtab === 1" @toSearch="updateSearchVal" @openDetail="openDetail" />
    <!-- 明细 -->
    <AdInvoiceReportItems :searchVal="searchVal" v-if="curtab === 2" @toSearch="updateSearchVal" />
    <!-- 运营汇总 -->
    <AdInvoiceReportByUser :searchVal="searchVal" v-if="curtab === 3" @toSearch="updateSearchVal" />
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'AdInvoiceReport',
  })
</script>
<script setup lang="ts">
  import { ref, defineComponent, onMounted } from 'vue'
  import AdInvoiceReportList from './adInvoiceReportList.vue'
  import AdInvoiceReportItems from './adInvoiceReportItems.vue'
  import AdInvoiceReportByUser from './adInvoiceReportByUser.vue'
  onMounted(() => {})
  const curtab = ref(1)
  const searchVal = ref<any>({})

  const tabCardList = [
    { name: '发票', key: 1 },
    { name: '明细', key: 2 },
    { name: '运营汇总', key: 3 },
  ]
  function updateSearchVal(info: any) {
    searchVal.value = info
  }
  function openDetail(id: string) {
    searchVal.value.invoiceId = id
    searchVal.value.startDate = null
    searchVal.value.endDate = null
    searchVal.value.dataType = null
    curtab.value = 2
  }
</script>

<style lang="less" scoped>
  :deep(.arco-tabs-nav-tab) {
    background-color: #fff;
  }
</style>
